<template>
  <div>
    <div
      style="padding-top: 30px"
      v-if="showSearch"
      :class="{
        'enter-level flipInX': showSearch,
      }"
    >
      <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
        <el-form-item label="字典名称">
          <el-input
            v-model="searchFrom.key"
            placeholder="请输入字典名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchFrom.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="正常" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="searchFrom.type"
            placeholder="请选择类型"
            clearable
          >
            <el-option
              :label="item.value"
              :value="item.key"
              v-for="item of searchType"
              :key="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="searchFrom.note" placeholder="decs..." clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :icon="Search">
            搜索
          </el-button>
          <el-button type="info" @click="reset" :icon="Refresh">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding: 30px">
      <div
        style="
          padding-bottom: 20px;
          display: flex;
          justify-content: space-between;
        "
      >
        <div>
          <el-button :icon="Plus" type="success" @click="insertOne"
            >新增</el-button
          >
          <el-button
            :icon="Delete"
            type="danger"
            @click="batchDel()"
            :disabled="isBatch"
            >删除</el-button
          >
        </div>
        <div>
          <el-button
            :icon="Search"
            circle
            @click="showSearch = !showSearch"
          ></el-button>
          <el-button :icon="Refresh" circle @click="reset"></el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="settingList"
        style="width: 100%"
        height="600"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column
          type="index"
          :index="indexMethod"
          label="编号"
          fixed
          width="105"
        />
        <el-table-column property="key" label="字段名称" width="250" />
        <el-table-column
          property="value"
          label="字段值"
          width="300"
          show-overflow-tooltip
        />
        <el-table-column label="类型" width="130">
          <template #default="scope">{{ typeArr[scope.row.type] }}</template>
        </el-table-column>
        <el-table-column label="状态" width="130">
          <template #default="scope">
            <el-tag
              :type="scope.row.status === 0 ? 'error' : 'success'"
              disable-transitions
              >{{ scope.row.status === 0 ? "禁用" : "正常" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          property="note"
          label="字段描述"
          show-overflow-tooltip
          width="350"
        />
        <el-table-column label="创建时间" width="200">
          <template #default="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button @click="oper(scope.row, 1)" type="text" :icon="EditPen">
              修改
            </el-button>
            <el-button
              @click="oper(scope.row.key, 2)"
              type="text"
              :icon="Delete"
            >
              删除
            </el-button>
            <el-button
              @click="oper(scope.row.key, 3)"
              type="text"
              :icon="Lock"
              v-if="scope.row.status === 1"
            >
              禁用
            </el-button>
            <el-button
              @click="oper(scope.row.key, 3)"
              type="text"
              :icon="Unlock"
              v-else
            >
              解禁
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <add-setting ref="addSettingRef" @common="handlerCommon"></add-setting>
</template>

<script setup>
import request from "@/assets/js/request";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import addSetting from "@/components/setting/add-setting.vue";
import {
  Search,
  Refresh,
  EditPen,
  Delete,
  Unlock,
  Plus,
  Lock,
} from "@element-plus/icons-vue";

const showSearch = ref(true);
const searchFrom = ref({
  key: "",
  status: null, // 默认全部
  type: null, // 默认全部
  note: "",
});
const addSettingRef = ref();
const selectable = ref();
const settingList = ref([]);
const isBatch = ref(true);
const selectKey = ref([]);
const loading = ref(false);

const typeArr = {
  0: "通用",
  1: "服务器配置",
  2: "FTP参数",
  3: "OSS服务器配置",
  4: "支付宝配置",
};

const searchType = [
  {
    key: 0,
    value: "通用",
  },
  {
    key: 1,
    value: "服务器配置",
  },
  {
    key: 2,
    value: "FTP参数配置",
  },
  {
    key: 3,
    value: "OSS服务器配置",
  },
  {
    key: 4,
    value: "支付宝配置",
  },
];

const indexMethod = (index) => {
  return index + 1;
};
//获取数据
const getSettingList = () => {
  loading.value = true;
  let formData = {
    key: searchFrom.value.key,
    status: searchFrom.value.status === null ? 2 : searchFrom.value.status, // 默认全部
    type: searchFrom.value.type === null ? 2 : searchFrom.value.type, // 默认全部
    note: searchFrom.value.note,
  };
  request
    .post("/setting/list", formData)
    .then((res) => {
      if (res.code === 200) {
        settingList.value = res.data;
      } else {
        ElMessage.error(res.msg);
      }
      loading.value = false;
    })
    .catch((err) => {
      console.log(err);
    });
  setTimeout(() => {
    loading.value = false;
  }, 5000);
};
// 新增数据
const insertOne = () => {
  addSettingRef.value.open(null, "添加字段");
};

// 数据操作
const oper = (key, type) => {
  if (type == 1) {
    addSettingRef.value.open(key, "修改字段");
    return;
  }
  request
    .get(`/setting/oper?key=${key}&type=${type}`)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("操作成功");
        getSettingList();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const handlerCommon = (item) => {
  request
    .post("/setting/add", item)
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success("操作成功");
        getSettingList();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      console.log("", err);
      ElMessage.error("网络错误");
    });
};

// 批量删除
const batchDel = () => {
  console.log(selectKey.value);
  request
    .post("/setting/batch-del", selectKey.value)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("操作成功！");
        getSettingList();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

const onSubmit = () => {
  if (
    searchFrom.value.key == "" &&
    searchFrom.value.note == "" &&
    searchFrom.value.status == null &&
    searchFrom.value.type === null
  ) {
    return;
  }
  getSettingList();
};
const reset = () => {
  searchFrom.value = {
    key: "",
    status: null, // 默认全部
    type: null, // 默认全部
    note: "",
  };
  getSettingList();
};

// 多选
const handleSelectionChange = (val) => {
  let arr = val.map((item) => item.key);
  selectKey.value = arr;
  if (selectKey.value.length > 0) {
    isBatch.value = false;
  } else {
    isBatch.value = true;
  }
};

onMounted(() => {
  getSettingList();
});
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-form-item__label {
  font-weight: bold;
}

.el-form {
  display: inline;
}
</style>
